<template>
  <div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="map" ref="chartDom3" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import chinaJson from "./china.json";
import { userdata } from "@/api/userdata.js";
const mapList1 = ref([]);

let myChart3 = null;
const chartDom3 = ref(null);
let option3;

function getMapList() {
  userdata()
    .then((res) => {
      // console.log(res);
      const data = res.data.data.userList;
      // console.log(data);
     
       data.map((item) => {
        mapList1.value.push({
          province:item.province,
          num:1,
        });
      });
      // console.log(mapList1);
    })
    .catch((err) => {
      // console.log("error");
    });
}
getMapList();
// console.log(mapList1.value,",,,,,,");

// 省份数据
const mapList = [
  { name: "南海诸岛", value: 0 },
  { name: "北京", value: 2170 },
  { name: "天津", value: 1559 },
  { name: "上海", value: 2423 },
  { name: "重庆", value: 3048 },
  { name: "河北", value: 7556 },
  { name: "河南", value: 9605 },
  { name: "云南", value: 480 },
  { name: "辽宁", value: 4359 },
  { name: "黑龙江", value: 3788 },
  { name: "湖南", value: 6860 },
  { name: "安徽", value: 632 },
  { name: "山东", value: 10047 },
  { name: "新疆", value: 2444 },
  { name: "江苏", value: 802 },
  { name: "浙江", value: 5737 },
  { name: "江西", value: 4622 },
  { name: "湖北", value: 5917 },
  { name: "广西", value: 4885 },
  { name: "甘肃", value: 2625 },
  { name: "山西", value: 7025 },
  { name: "内蒙古", value: 2534 },
  { name: "陕西", value: 3835 },
  { name: "吉林", value: 2717 },
  { name: "福建", value: 3941 },
  { name: "贵州", value: 3580 },
  { name: "广东", value: 1346 },
  { name: "青海", value: 3983 },
  { name: "西藏", value: 0 },
  { name: "四川", value: 341 },
  { name: "宁夏", value: 681 },
  { name: "海南", value: 925 },
  { name: "台湾", value: 0 },
  { name: "香港", value: 745 },
  { name: "澳门", value: 63 },
];

// 绘制地图
function buildMap() {
  echarts.registerMap("china", chinaJson);
  option3 = {
    myChart: null,
    mapName: "china",
    title: {
      text: "全国用户分布地图",
      subtext: "",
      x: "center",
      y: "3%",
      textStyle: {
        color: "black",
        fontWeight: "bold",
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,0.3)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
      },
    },

    //左侧小导航图标
    visualMap: {
      show: true,
      x: "left",
      y: "bottom",
      pieces: [
        { gt: 10000, lte: 40000 },
        { gt: 5000, lte: 10000 },
        { gt: 3000, lte: 5000 },
        { gt: 1000, lte: 3000 },
        { gt: 0, lte: 1000 },
        { lte: 0 },
      ],
      color: ["#f27e7e", "#ef9999", "#f1b4b4", "#ffd2d3", "#ffeaea", "#fff"],
    },

    //配置属性
    series: [
      {
        name: "用户人数",
        type: "map",
        map: "china",
        roam: true,
        label: {
          show: true,
        },
        emphasis: {
          itemStyle: {
            areaColor: "#eb6161",
          },
        },
        data: mapList, //数据
      },
    ],
  };
}
buildMap();
onMounted(() => {
  myChart3 = echarts.init(chartDom3.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart3.setOption(option3);
});
// 让图例大小随窗口变化自适应
window.onresize = function () {
  myChart3.resize();
};
</script>

<style lang="less" scoped></style>
